<script setup lang="ts">

import { EnumBetResult, EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { ExcutePlan, RoundInfo } from '@/models/execute/ExecutePlan';
import { onMounted, reactive, ref, nextTick, getCurrentInstance } from 'vue';
import WisdomRecmStrategyDebug from '../components/debug/WisdomRecmStrategyDebug.vue';
import WisdomMoneyStrategyV29Debug from '../components/debug/WisdomMoneyStrategyV29Debug.vue';
import { useRoute } from 'vue-router';
import { compression, decompress } from '@/utils/compress';
import { PickerOption, showConfirmDialog } from 'vant';
import { FixedValueStrategy } from '@/models/execute/recmStrategy/FixedStrategy';
import { IPlan } from '@/models/execute/IExecutePlan';
import { SymmetricMoneyStrategy } from '@/models/execute/moneyStrategy/SymmetricMoneyStrategy';


defineOptions({
    components: { WisdomRecmStrategyDebug, WisdomMoneyStrategyV29Debug }
})

let route = useRoute();
const debug = ref(false);
debug.value = route.query.debug ? true : false;

const nextTableReset = ref(false);
if ((route.query.ntr?.toString() ?? "") == "true" || (route.query.ntr?.toString() ?? "") == "") {
    nextTableReset.value = true;
}

const roundInfo = reactive<RoundInfo>(new RoundInfo());


const showTab = ref(['showResult']);
const resultInputCompoenent = ref<any>(null);
const resultComponent = ref<any>(null);
let planSum = ref(0);

let game = reactive(new ExcutePlan());
let planA = reactive(new ExcutePlan());
let planB = reactive(new ExcutePlan());

let tempArray = [planA, planB];
const planArray = reactive(tempArray);
const planBStart = 4;
const initData = () => {
    let newRound = new RoundInfo();
    Object.assign(roundInfo, newRound);
    resultInputCompoenent.value?.initData();
    resultComponent.value?.initData();
    snapShot.splice(0, snapShot.length);
    planSum.value = 0;

    let newGame = new ExcutePlan();
    Object.assign(game, newGame);

    let multiple = planA.multiple;
    let newPlanA = new ExcutePlan();
    Object.assign(planA, newPlanA);
    planA.running = true;
    planA.planName = 'A计划';
    planA.multiple = multiple;
    planA.recmStrategy = [
        new FixedValueStrategy({ reverse: false, result: EnumBjlResult.Z })
    ];
    planA.moneyStrategy = [
        new SymmetricMoneyStrategy("ld-money-strategy", {
            redWinStep: 1,
            redFailStep: -2,
            blueWinStep: -1,
            blueFailStep: 1,
            blueStopLFailCount: 2,
            baseMoney: 10,
            betCount: 0,
            stepMoney: 10
        })
    ];
    planA.toResult(new RoundInfo());

    let newPlanB = new ExcutePlan();
    multiple = planB.multiple;
    Object.assign(planB, newPlanB);
    planB.running = true;
    planB.planName = 'B计划';
    planB.multiple = multiple;
    planB.recmStrategy = [
        new FixedValueStrategy({ reverse: false, result: EnumBjlResult.X })
    ];
    planB.moneyStrategy = [
        new SymmetricMoneyStrategy("ld-money-strategy", {
            redWinStep: 1,
            redFailStep: -2,
            blueWinStep: -1,
            blueFailStep: 1,
            blueStopLFailCount: 2,
            baseMoney: 10,
            betCount: 0,
            stepMoney: 10
        })
    ];
    planB.toResult(new RoundInfo());

    planArray.splice(0, planArray.length);
    planArray.push(planA);
    planArray.push(planB);

};

onMounted(() => {
    initData();
    nextTick(() => {
        showTab.value = ['showResult'];
    })

});
const setResult = (result: EnumBjlResult) => {
    roundInfo.results.push(result)
    roundInfo.currentResult = result;
    resultInputCompoenent.value.setResult(result);

    if (game.recmInfo.recmV != EnumBjlResult.U) {
        resultComponent.value?.setResult(result == game.recmInfo.recmV ? 1 : 0);
    }
    else {
        resultComponent.value?.record();
    }

    game.setResult(roundInfo, game.recmInfo, game.multiple, game.waterRate, game.fuliRate);
    let money = 0;

    planArray.forEach(plan => {
        let planRoundInfo = Object.assign({}, roundInfo);
        plan.setResult(planRoundInfo, plan.recmInfo, plan.multiple, plan.waterRate, plan.fuliRate);

        let planUserRecmV = plan.toResult(roundInfo);
        planRoundInfo.userRecm = planUserRecmV;
        plan.userRecmInfo.recmV = planUserRecmV;
        let [planRecmV, planRecmMoney] = plan.toMoney(planRoundInfo, plan.recmInfo, plan.userRecmInfo, plan.baseMoney);
        plan.recmInfo.recmV = planRecmV;
        plan.recmInfo.recmMoney = planRecmMoney;

        if (plan.recmInfo.recmV == EnumBjlResult.Z) {
            money += (plan.recmInfo.recmMoney * plan.multiple);
        }
        else if (plan.recmInfo.recmV == EnumBjlResult.X) {
            money -= (plan.recmInfo.recmMoney * plan.multiple);
        }


    });

    if (money > 0) {
        game.recmInfo.recmV = EnumBjlResult.Z;
        game.recmInfo.recmMoney = Math.abs(money);
    }
    else if (money < 0) {
        game.recmInfo.recmV = EnumBjlResult.X;
        game.recmInfo.recmMoney = Math.abs(money);
    }
    else {
        game.recmInfo.recmV = EnumBjlResult.U;
        game.recmInfo.recmMoney = 0;
    }

    let sum = 0;
    planArray.forEach(plan => {
        sum += (plan.recmInfo.summaryInfo.winMoney - plan.recmInfo.summaryInfo.failMoney);
    })
    planSum.value = sum;
    record();

};
const showMoney = () => {
    let money = 0;
    planArray.forEach(plan => {
        let [recmV, recmMoney] = plan.showMoney();
        if (recmV == EnumBjlResult.Z) {
            money += (recmMoney * plan.multiple);
        }
        else if (recmV == EnumBjlResult.X) {
            money -= (recmMoney * plan.multiple);
        }
    })
    if (money > 0) {
        game.recmInfo.recmV = EnumBjlResult.Z;
        game.recmInfo.recmMoney = Math.abs(money);
    }
    else if (money < 0) {
        game.recmInfo.recmV = EnumBjlResult.X;
        game.recmInfo.recmMoney = Math.abs(money);
    }
    else {
        game.recmInfo.recmV = EnumBjlResult.U;
        game.recmInfo.recmMoney = 0;
    }
};

const snapShot: string[] = [];

type SnapObject = {
    game: ExcutePlan,
    roundInfo: RoundInfo,
    planA: ExcutePlan,
    planB: ExcutePlan,
    planSum: number
}
const record = () => {
    snapShot.push(compression({
        game,
        roundInfo,
        planA,
        planB,
        planSum: planSum.value,
    }));
};

const resetGame = () => {
    showConfirmDialog({
        title: '提示',
        message: '确认重新开始吗？',
        width: '80%'
    }).then(() => {
        // on close
        initData();
    });
};

const revert = () => {

    resultInputCompoenent.value.revert();
    let revertRound = snapShot.pop();
    if (revertRound) {
        let revertObj = decompress(revertRound) as SnapObject;
        let game = revertObj.game;
        resultComponent.value?.revert();
    }


    let top = snapShot[snapShot.length - 1];
    if (top) {
        let topObj = decompress(top) as SnapObject;

        if (topObj.roundInfo) roundInfo.copyValue(topObj.roundInfo);
        if (topObj.game) game.copyValue(topObj.game);
        if (topObj.planA) planA.copyValue(topObj.planA);
        if (topObj.planB) planB.copyValue(topObj.planB);
        planSum.value = topObj.planSum;

    }
    else {
        initData();
    }
};
const nextTable = () => {

    showConfirmDialog({
        title: '提示',
        message: '确认换桌吗',
        width: '80%'
    }).then(() => {
        // on close
        resultInputCompoenent.value.nextTable();
        resultComponent.value?.nextTable();
        roundInfo.changeCount++;

        snapShot.push(compression({ game, roundInfo }));
    });

}



const showMultiplePicker = ref(false);
let plan: IPlan | null;
const showMultipleDialog = (pl: IPlan) => {
    plan = pl;
    showMultiplePicker.value = true;

};
const cancelMultipleDialog = () => {
    plan = null;
    showMultiplePicker.value = false;
};
const selectMultiple = ({ selectedOptions }: PickerOption) => {
    let v = parseFloat(selectedOptions[0].value?.toString() ?? "");
    if (isNaN(v)) v = 1;
    if (plan) {
        plan.multiple = v;
    }
    showMultiplePicker.value = false;
    showMoney();
};

const pickerColumns: PickerOption[] = [];
for (let i = -1; i < 20; i++) {
    pickerColumns.push({ text: (i + 1), value: (i + 1) });
}
</script>
<template>

    <!-- 底部弹出 -->
    <van-popup v-model:show="showMultiplePicker" position="bottom" :style="{ height: '50%' }">
        <van-picker title="请选择倍率" :columns="pickerColumns" @cancel="cancelMultipleDialog" @confirm="selectMultiple" />
    </van-popup>


    <van-row>
        <van-col :offset="1" :span="23">
            <BjlInput ref="resultInputCompoenent" />
        </van-col>
    </van-row>


    <van-divider :margin="24" style="margin:0;" />

    <van-row class="recm-item">
        <van-col v-if="game.recmInfo.recmV == EnumBjlResult.X" class="recm x" :span="12">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>

        <van-col :span="12" v-if="game.recmInfo.recmV == EnumBjlResult.Z" class="recm z">
            {{ parseInt((game.recmInfo.recmMoney * game.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>
    </van-row>

    <van-row>
        <van-col :span="24">
            <van-collapse v-model="showTab">
                <van-collapse-item name="showResult">
                    <template #title>
                        <van-row style="text-align: center;">
                            <van-col offset="1" :span="7">
                                <span style="color:red;">{{ game.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ game.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="10">
                                <span :style="[
                                    game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ game.recmInfo.summaryInfo.winCount - game.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(game.recmInfo.summaryInfo.winCount + game.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (game.recmInfo.summaryInfo.winCount / (game.recmInfo.summaryInfo.winCount +
                                        game.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>
                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="resultComponent" labelName="运势路" />
                </van-collapse-item>
            </van-collapse>
        </van-col>
    </van-row>

    <van-row class="recm-item">
        <van-col :span="6" :style="[
            (planSum > 0) ? { 'color': 'red' }
                : (planSum < 0) ? { 'color': 'blue' } : ''
        ]">
            {{ planSum.toFixed(0) }}
        </van-col>
        <van-col :span="6" style="color:red;">
            {{ game.recmInfo.summaryInfo.fuliMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" style="color:blue;">
            {{ game.recmInfo.summaryInfo.waterMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" :style="[
            (game.recmInfo.summaryInfo.winMoney -
                game.recmInfo.summaryInfo.failMoney -
                game.recmInfo.summaryInfo.waterMoney > 0) ? { 'color': 'red' }
                : (game.recmInfo.summaryInfo.winMoney -
                    game.recmInfo.summaryInfo.failMoney -
                    game.recmInfo.summaryInfo.waterMoney < 0) ? { 'color': 'blue' } : ''
        ]">
            {{ (game.recmInfo.summaryInfo.winMoney -
                game.recmInfo.summaryInfo.failMoney -
                game.recmInfo.summaryInfo.waterMoney).toFixed(0) }}
        </van-col>
    </van-row>

    <van-row class="operate">
        <van-col :span="6">
            <van-button class="BSync" @click="revert">撤销</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="resetGame">重置</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="nextTable">换桌</van-button>
        </van-col>
        <van-col :span="6">
            <van-button style="width:75px" class="BSync" @click="showMultipleDialog(game)">{{ game.multiple
                }}</van-button>
        </van-col>
    </van-row>
    <van-row justify="center" class="recm-item" style="margin:40px 0;">
        <van-col offset="1" :span="10" class="recm x" @click="setResult(EnumBjlResult.X)">&nbsp;</van-col>
        <van-col offset="1" :span="10" class="recm z" @click="setResult(EnumBjlResult.Z)">&nbsp;</van-col>
    </van-row>


    <van-row class="debug item" v-for="(plan, idx) in planArray" v-if="debug">
        <van-col :span="3" :offset="1">
            <van-button class="BSync" @click.stop="showMultipleDialog(plan)">{{ plan.multiple }}</van-button>
        </van-col>
        <van-col :span="5">{{ plan.planName }}</van-col>
        <van-col :span="3">
            <span v-if="plan.recmInfo.recmV == EnumBjlResult.Z" class="recm" style="background-color: red;">{{
                plan.recmInfo.recmMoney * plan.multiple }}</span>
            <span v-else-if="plan.recmInfo.recmV == EnumBjlResult.X" class="recm" style="background-color: blue;">{{
                plan.recmInfo.recmMoney * plan.multiple }}</span>
            <span v-else></span>
        </van-col>
        <van-col :span="4">
            <span :style="[
                plan.recmInfo.summaryInfo.winMoney > plan.recmInfo.summaryInfo.failMoney ? { 'color': 'red' }
                    : plan.recmInfo.summaryInfo.winMoney < plan.recmInfo.summaryInfo.failMoney ? { 'color': 'blue' } : ''
            ]">{{ plan.recmInfo.summaryInfo.winMoney - plan.recmInfo.summaryInfo.failMoney }}</span>
        </van-col>
        <van-col :span="6">
            <span style="color:red;"> {{ plan.recmInfo.summaryInfo.winCount }}</span>
            -
            <span style="color:blue;">{{ plan.recmInfo.summaryInfo.failCount }}</span>
        </van-col>
    </van-row>
</template>

<style scoped>
.st {
    font-size: 16px;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.operate {
    text-align: center;
    height: auto;
    margin: 5px 0;
}

.recm-item {
    margin: 5px 0;

    div {
        align-items: center;
        color: coral;
        height: 40px;
        line-height: 40px;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-size: 16px;
    }

    .recm {
        border-radius: 0;
        /* line-height: 40px; */
        padding: 5px 30px;
        width: 100%;
        font-size: 24px;
    }

    .recm.x {
        color: white;
        background-color: blue;

    }

    .recm.z {
        color: white;
        background-color: red;
    }

    .urecm {
        width: 13px;
        height: 13px;
        border-radius: 90px;
        display: inline-block;

    }

    .urecm.z {
        border: 1px solid red;
    }

    .urecm.x {
        border: 1px solid blue;
    }
}

.tab-item {
    div {
        align-items: center;
        color: black;
        height: 15px;
        line-height: 15px;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-size: 16px;
    }

    .recm {
        border-radius: 0;
        /* line-height: 40px; */
        padding: 5px 6px;
        width: 30px;
        font-size: 16px;
    }

    .recm.x {
        color: white;
        background-color: blue;

    }

    .recm.z {
        color: white;
        background-color: red;
    }
}


div.recm {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 90px;
}

div.Z {
    border: 3px solid red;
}

div.X {
    border: 3px solid blue;
}

div.B {
    border: 3px solid rgb(6, 237, 83);
}

.operate button,
.operate_button button {
    font-size: 12px;
    color: white;
    border: none;
    margin: 5px 15px;
    padding: 10px;
}

.BZ {
    background-color: #ae2a2a;
    color: red !important;
}

.BX {
    background-color: #2a71ae;
    color: blue !important;
}

.BSync {
    background-color: coral;
    color: white;
    height: 30px;
    width: 45px;
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}

.debug.item {
    font-size: 14px;
    margin: 5px 0;
    width: 100%;
    text-align: center;


    .recm {
        color: white;
        height: 30px;
        width: 40px;
        font-size: 12px;
        display: inline-block;
        line-height: 30px;
    }
}
</style>